<template>
  <page-detail>
    <div class="form-container">
      <!-- 表单内容 -->
      <van-form ref="form">
        <div class="upload-section">
          <div class="upload-title">封面图</div>
          <ne-file-upload :max-file="1" v-model="formData.itemCoverUrls" />
        </div>
        <!-- 图片上传 -->
        <div class="upload-section">
          <div class="upload-title">宣传图</div>
          <ne-file-upload v-model="formData.itemPublicityUrls" />
        </div>
        <!-- 矛盾标题 -->
        <van-field
          v-model="formData.itemTitle"
          label="活动名称"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入活动名称' }]"
        />

        <!--        <van-field-->
        <!--            v-model="formData.itemName"-->
        <!--            label="活动类型"-->
        <!--            placeholder="请选择"-->
        <!--            readonly-->
        <!--            clickable-->
        <!--            right-icon="arrow-down"-->
        <!--            @click="showTypePicker = true"-->
        <!--            :rules="[{ required: true, message: '请选择活动类型' }]"-->
        <!--        />-->
        <van-field
          v-model="formData.itemSubTypeName"
          label="活动子类型"
          placeholder="请选择"
          readonly
          clickable
          right-icon="arrow-down"
          @click="showSubTypePicker = true"
          :rules="[{ required: true, message: '请选择活动子类型' }]"
        />
        <van-field
          v-model="formData.itemPerson"
          label="主办人"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入主办人' }]"
        />
        <van-field
          type="number"
          v-model="formData.itemScore"
          label="积分"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入积分' }]"
        />
        <van-field
          v-model="formData.itemPhone"
          label="咨询电话"
          placeholder="请输入"
          :rules="[
            { required: true, message: '请输入咨询电话' },
            { pattern, message: '请输入正确的咨询电话' },
          ]"
        />
        <van-field
          v-model="formData.itemStartTimeName"
          label="活动开始时间"
          placeholder="请选择"
          readonly
          clickable
          @click="showTimeModal('itemStartTime')"
          :rules="[{ required: true, message: '请选择活动开始时间' }]"
        >
          <template #right-icon>
            <img
              src="../../static/image/rl-icon.png"
              style="width: 16px; height: 16px"
            />
          </template>
        </van-field>
        <van-field
          v-model="formData.itemEndTimeName"
          label="活动结束时间"
          placeholder="请选择"
          readonly
          clickable
          @click="showTimeModal('itemEndTime')"
          :rules="[{ required: true, message: '请选择活动结束时间' }]"
        >
          <template #right-icon>
            <img
              src="../../static/image/rl-icon.png"
              style="width: 16px; height: 16px"
            />
          </template>
        </van-field>
        <van-field
          v-model="formData.itemAddr"
          label="活动地点"
          placeholder="请选择"
          :rules="[{ required: true, message: '请选择活动地点' }]"
          readonly
          type="textarea"
          autosize
        >
          <template #button>
            <img
              src="@/static/select-map.png"
              style="width: 22px; height: 22px"
              @click="search"
            />
          </template>
        </van-field>
        <van-field
          v-model="formData.itemContent"
          label="活动内容"
          type="textarea"
          placeholder="请输入"
          autosize
        />
      </van-form>

      <!-- 类型选择器 -->
      <van-popup v-model="showTypePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="typeList"
          @confirm="onTypeConfirm"
          @cancel="showTypePicker = false"
        />
      </van-popup>
      <van-popup v-model="showSubTypePicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="subTypeList"
          @confirm="onSubTypeConfirm"
          @cancel="showSubTypePicker = false"
        />
      </van-popup>
      <van-popup
        v-model="showTime"
        position="bottom"
        :close-on-click-overlay="false"
      >
        <van-datetime-picker
          @confirm="dateConfirm"
          @cancel="showTime = false"
          v-if="timeType === 'itemStartTime'"
          v-model="formData.itemStartTime"
          type="datetime"
          title="开始时间"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-datetime-picker
          @confirm="dateConfirm"
          @cancel="showTime = false"
          v-if="timeType === 'itemEndTime'"
          v-model="formData.itemEndTime"
          type="datetime"
          title="结束时间"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <!--      <van-calendar v-model="showTime" :show-confirm="false" type="range" @confirm="dateConfirm" color="#66c2ff" :default-date="null"/>-->
    </div>
    <template #footer>
      <van-button round type="primary" style="width: 200px" @click="submit">
        立即发起
      </van-button>
    </template>
    <select-map ref="selectMap" @change="mapChange" />
  </page-detail>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { getDict } from '../../api/tbDict'
import NeFileUpload from '../../components/NeFileUpload.vue'
import { tbMoralEducationSave } from '../../api/tbMoralEducation'
import { mapGetters } from 'vuex'
import SelectMap from '../../components/SelectMap.vue'
export default {
  name: 'wx_pages_djzh_activitySubmit',
  components: { NeFileUpload, SelectMap },
  data() {
    return {
      timeType: '',
      minDate: new Date(2024, 0, 1),
      maxDate: new Date(2099, 10, 1),
      currentDate: new Date(),
      showTypePicker: false,
      showSubTypePicker: false,
      pattern: /^1[3-9]\d{9}$/,
      formData: {
        itemTitle: '',
        itemCoverUrl: '',
        itemPublicityUrl: '',
        itemStartTime: new Date(),
        itemEndTime: new Date(),
        itemAddr: '',
        itemScore: 0,
        itemContent: '',
        itemPerson: '',
        itemUserId: '',
        itemPhone: '',
        itemType: '2',
        itemSubType: '',
        note: '',
      },
      typeList: [],
      subTypeList: [],
      // 上传的文件列表
      fileList: [],
      showTime: false,
      latitude: '',
      longitude: '',
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 类型选择确认
    onTypeConfirm(value) {
      this.formData.itemType = value.value
      this.formData.itemName = value.text
      this.showTypePicker = false
    },
    onSubTypeConfirm(value) {
      this.formData.itemSubType = value.value
      this.formData.itemSubTypeName = value.text
      this.showSubTypePicker = false
    },
    // 提交表单
    submit() {
      const _this = this
      const formData = {
        ...this.formData,
        longitude: _this.longitude,
        latitude: _this.latitude,
      }
      formData.itemCoverUrl =
        formData.itemCoverUrls &&
        formData.itemCoverUrls.map((i) => i.url).join(',')
      formData.itemPublicityUrl =
        formData.itemPublicityUrls &&
        formData.itemPublicityUrls.map((i) => i.url).join(',')
      formData.itemUserId = _this.userInfo.userId
      delete formData.itemCoverUrls
      delete formData.itemPublicityUrls
      _this.$refs.form.validate().then(() => {
        Dialog.confirm({
          title: '提示',
          message: '是否确认提交?',
        })
          .then(async () => {
            _this.$showLoading('提交中...')
            await tbMoralEducationSave(formData)
            _this.$hideLoading()
            Toast.success('提交成功')
            _this.$navigateBack()
          })
          .catch(() => {})
      })
    },

    dateConfirm(value) {
      this.showTime = false
      this.formData[this.timeType] = this.$dayjs(value).format(
        'YYYY-MM-DD HH:mm:ss'
      )
      this.formData[`${this.timeType}Name`] = this.$dayjs(value).format(
        'YYYY-MM-DD HH:mm:ss'
      )
    },
    showTimeModal(type) {
      this.showTime = true
      this.timeType = type
    },
    search() {
      this.$refs.selectMap.showModal()
    },
    mapChange(position) {
      this.formData.itemAddr = position.address
      this.formData.latitude = position.lat
      this.formData.longitude = position.lng
      this.formData = { ...this.formData }
    },
  },
  onLoad() {
    const _this = this
    getDict('item_type').then((res) => {
      _this.typeList = res.data.map((item) => ({
        text: item.dictValue,
        value: item.dictKey,
      }))
    })
    getDict('item_sub_type').then((res) => {
      _this.subTypeList = res.data.map((item) => ({
        text: item.dictValue,
        value: item.dictKey,
      }))
    })
    // MapUtil.Geolocation().then(res => {
    //   _this.latitude = res.lat
    //   _this.longitude = res.lng
    // })
  },
}
</script>

<style lang="scss" scoped>
.form-container {
  padding: 20px 16px;
  min-height: 100vh;
  background-color: #f7f8fa;

  .upload-section {
    margin: 20px 0;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;

    .upload-title {
      font-size: 14px;
      color: #333;
      margin-bottom: 16px;
    }

    .upload-btn {
      width: 80px;
      height: 80px;
      background-color: #f7f8fa;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .upload-text {
        font-size: 12px;
        color: #969799;
        margin-top: 8px;
      }
    }
  }
}
</style>
